﻿@section head{
    <style>
        .layui-table-tool {
            border-bottom: 1px solid lightgray !important;
        }

        .pre-warn {
            color: red;
            font-size: xx-small;
            display: inline-block;
        }

        .layui-input-group .layui-input-prefix {
            width: 0;
        }

        .wechat-item {
        }

        .ali-item {
        }

        .upload {
        }
    </style>
}
<body class="pear-container">
    <table id="pay_config"></table>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">增加</button>
          <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="remark">配置说明</button>
          <pre style="font-size:x-small; color:red; display:inline-block">请先详细阅读配置说明，再进行相关操作</pre>
        </div>
    </script>
    <script type="text/html" id="inlinBar">
        <div class="layui-clear-space">
          <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="delete">删除</a>
        </div>
    </script>
    <div id="payconfig-dialog" style="display:none">
        <form id="form1" class="layui-form" lay-filter="add_form" style="margin: 16px;">
            <div class="layui-row layui-col-space16">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">支付类型</div>
                    <select id="payCategory" name="payCategory" lay-filter="pay_select_filter" lay-verify="required" lay-search>
                        <option value=""></option>
                        <option value="1">支付宝</option>
                        <option value="2">微信</option>
                        <option value="3" disabled>银行卡</option>
                    </select>
                </div>
            </div>
            <div class="layui-row layui-col-space16">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">AppId</div>
                    <input type="text" name="appId" value="" lay-verify="required" placeholder="应用appId,多个以英文逗号隔开" lay-reqtext="应用appId,多个以英文逗号隔开" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-row layui-col-space16">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">服务器IP</div>
                    <input type="text" name="serverIp" value="" placeholder="服务器IP" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-row layui-col-space16 wechat-item">
                <div class="layui-input-group layui-col-sm7 layui-col-md7">
                    <div class="layui-input-prefix layui-input-split" style="width:none">商户号</div>
                    <input type="text" name="mchId" value="" placeholder="商户号" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
                <div class="layui-input-group layui-col-sm5 layui-col-md5">
                    <div class="layui-input-prefix layui-input-split">微信支付版本</div>
                    <input type="text" name="WechatPayVersion" value="V2" placeholder="微信支付版本,默认V2" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-row layui-col-space16 wechat-item">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">商户API密钥</div>
                    <input type="text" name="aPIKey" value="" placeholder="商户API密钥" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-row layui-col-space16 wechat-item">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">商户APIv3密钥</div>
                    <input type="text" name="aPIv3Key" value="" placeholder="商户APIv3密钥" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-row layui-col-space16 wechat-item">
                <div class="layui-input-group layui-col-sm10 layui-col-md10">
                    <div class="layui-input-prefix layui-input-split">商户API证书</div>
                    <textarea name="certificate" value="" placeholder="商户API证书" class="layui-textarea" lay-affix="clear"></textarea>
                </div>
                <div class="layui-col-sm2 layui-col-md2">
                    <button id="w_upload" type="button" class="layui-btn upload"><i class="layui-icon layui-icon-upload"></i>上传证书</button>
                </div>
            </div>
            <div class="layui-row layui-col-space16 wechat-item">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">商户API私钥</div>
                    <textarea name="aPIPrivateKey" value="" placeholder="商户API私钥" class="layui-textarea" lay-affix="clear"></textarea>
                </div>
            </div>
            <div class="layui-row layui-col-space16 wechat-item">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">RSA公钥</div>
                    <textarea name="rsaPublicKey" value="" placeholder="RSA公钥" class="layui-textarea" lay-affix="clear"></textarea>
                </div>
            </div>
            <div class="layui-row layui-col-space16 ali-item">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">签名类型</div>
                    <input type="text" name="signType" value="RSA2" placeholder="默认为RSA2" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-row layui-col-space16 ali-item">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">支付宝RSA公钥</div>
                    <textarea name="alipayPublicKey" value="" placeholder="支付宝RSA公钥" class="layui-textarea" lay-affix="clear"></textarea>
                </div>
            </div>
            <div class="layui-row layui-col-space16 ali-item">
                <div class="layui-input-group layui-col-sm12 layui-col-md12">
                    <div class="layui-input-prefix layui-input-split">应用RSA私钥</div>
                    <textarea name="appPrivateKey" value="" placeholder="应用RSA私钥" class="layui-textarea" lay-affix="clear"></textarea>
                </div>
            </div>
            <div class="layui-row layui-col-space16 ali-item">
                <div class="layui-input-group layui-col-sm10 layui-col-md10">
                    <div class="layui-input-prefix layui-input-split">应用公钥证书</div>
                    <textarea name="appPublicCert" value="" placeholder="应用公钥证书" class="layui-textarea" lay-affix="clear"></textarea>
                </div>
                <div class="layui-col-sm2 layui-col-md2">
                    <button id="a_upload1" type="button" class="layui-btn upload"><i class="layui-icon layui-icon-upload"></i>上传证书</button>
                </div>
            </div>
            <div class="layui-row layui-col-space16 ali-item">
                <div class="layui-input-group layui-col-sm10 layui-col-md10">
                    <div class="layui-input-prefix layui-input-split">支付宝公钥证书</div>
                    <textarea name="alipayPublicCert" value="" placeholder="支付宝公钥证书" class="layui-textarea" lay-affix="clear"></textarea>
                </div>
                <div class="layui-col-sm2 layui-col-md2">
                    <button id="a_upload2" type="button" class="layui-btn upload"><i class="layui-icon layui-icon-upload"></i>上传证书</button>
                </div>
            </div>
            <div class="layui-row layui-col-space16 ali-item">
                <div class="layui-input-group layui-col-sm10 layui-col-md10">
                    <div class="layui-input-prefix layui-input-split">支付宝根证书</div>
                    <textarea name="alipayRootCert" value="" placeholder="支付宝根证书" class="layui-textarea" lay-affix="clear"></textarea>
                </div>
                <div class="layui-col-sm2 layui-col-md2">
                    <button id="a_upload3" type="button" class="layui-btn upload"><i class="layui-icon layui-icon-upload"></i>上传证书</button>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="add_save">保存</button>
            </div>
        </form>
    </div>
    <script>
        //配置弹窗
        function CreateConfigDialog(table, $, form, layer, upload, prefix, rowdata) {
            var url = "/api/frame/add.pay.config";
            if (prefix === '编辑') {
                url = "/api/frame/edit.pay.config";
            }
            var layerIndex = layer.open({
                type: 1,
                id: 'add_layer',
                area: ['50%', '100%'],
                resize: false,
                shadeClose: true,
                title: prefix + '支付配置',
                offset: 'r',
                anim: 2,
                content: $('#payconfig-dialog'),
                success: function (layero, index, that) {                    
                    $(".wechat-item").hide();
                    $(".ali-item").hide();
                    if (prefix === '编辑') {
                        $('select[name=payCategory]').attr('disabled', true);
                        if (rowdata.payCategory === 1) {
                            $(".ali-item").show();
                            form.val('add_form', rowdata.alipayOption);
                        } else if (rowdata.payCategory === 2) {
                            $(".wechat-item").show();
                            form.val('add_form', rowdata.weChatPayOption);
                        }
                        form.val('add_form', rowdata);
                    } else {
                        //$('select[name=payCategory]').removeAttr('disabled');
                        $("#form1")[0].reset();
                    }
                    form.render();
                    form.on('select(pay_select_filter)', function (data) {
                        var selectValue = data.value;
                        $(".wechat-item").hide();
                        $(".ali-item").hide();
                        if (selectValue === '1') {
                            $(".ali-item").show();
                        } else if (selectValue === '2') {
                            $(".wechat-item").show();
                        }
                    });
                    upload.render({
                        elem: '.upload',
                        url: '/api/frame/upload',
                        accept: 'file',
                        done: function (res, index, upload) {
                            if (res.code === 0) {
                                layer.msg('上传成功');
                                var id = this.item[0].getAttribute('id');
                                var filepath = res.data;
                                if (id === 'w_upload') {
                                    $('textarea[name=certificate]').val(filepath);
                                } else if (id === 'a_upload1') {
                                    $('textarea[name=appPublicCert]').val(filepath);
                                } else if (id === 'a_upload2') {
                                    $('textarea[name=alipayPublicCert]').val(filepath);
                                } else if (id === 'a_upload3') {
                                    $('textarea[name=alipayRootCert]').val(filepath);
                                }
                            } else {
                                layer.msg(res.msg);
                            }
                        },
                        error: function (index, upload) {
                            layer.msg('网络连接失败');
                        }
                    })
                    form.on('submit(add_save)', function (obj) {
                        var field = obj.field;
                        var postData = {};
                        postData.appId = field.appId;
                        postData.serverIp = field.serverIp;
                        postData.payCategory = field.payCategory;
                        postData.wechatPayVersion = field.wechatPayVersion;
                        if (field.payCategory === '1') {
                            postData.alipayOption = field;
                        } else if (field.payCategory === '2') {
                            postData.weChatPayOption = field;
                        }
                        $.ajax({
                            type: 'post',
                            url: url,
                            dataType: 'json',
                            data: JSON.stringify(postData),
                            contentType: 'application/json',
                            success: function (rep) {
                                if (rep.code == 0) {
                                    layer.close(layerIndex);
                                    layer.msg(prefix + '成功');
                                    table.reloadData('pay_config');
                                }
                            }
                        });
                        return false;
                    });
                }
            });
        }

        //配置说明弹窗
        function CreateRemarkDialog(layer, content) {
            layer.open({
                type: 1,
                id: 'add_layer',
                area: ['50%', '100%'],
                resize: false,
                shadeClose: true,
                title: '配置说明文档',
                offset: 'r',
                anim: 2,
                content: content,
            });
        }

        layui.use(function () {
            var table = layui.table;
            var $ = layui.$;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;
            table.render({
                elem: '#pay_config',
                toolbar: '#toolbar',
                defaultToolbar: [],
                page: false,
                url: '/api/frame/list.pay.config',
                method: 'post',
                even: true,
                cols: [[ 
                    { field: 'payCategoryDesc', title: '支付类型', width: '10%', fixed: 'left', },
                    { field: 'appId', title: 'AppId', width: '30%' },
                    { field: 'serverIp', title: '服务器IP', width: '20%' },
                    { field: 'wechatPayVersion', title: '微信支付版本号', width: '20%' },
                    { fixed: 'right', title: '操作', toolbar: '#inlinBar', width: '20%' }
                ]]
            });
            table.on('toolbar(pay_config)', function (obj) {
                var layEvent = obj.event;
                if (layEvent == 'add') {
                    CreateConfigDialog(table, $, form, layer, upload, '增加', null);
                } else if (layEvent == 'remark') {
                    $.ajax({
                        type: 'post',
                        url: '/api/frame/get.content/支付相关配置说明.json',
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (rep) {
                            if (rep.code == 0) {
                                CreateRemarkDialog(layer, rep.data);
                            }
                        }
                    });
                }
            });
            table.on('tool(pay_config)', function (obj) {
                var layEvent = obj.event;
                var rowData = obj.data;

                if (layEvent == 'edit') {
                    CreateConfigDialog(table, $, form, layer, upload, '编辑', rowData);
                }
                else if (layEvent == 'delete') {
                    layer.confirm('确定删除吗?', function (index) {
                        $.ajax({
                            type: 'post',
                            url: '/api/frame/delete.pay.config/' + rowData.payCategory,
                            dataType: 'json',
                            contentType: 'application/json',
                            success: function (rep) {
                                if (rep.code == 0) {
                                    layer.msg('删除成功');
                                    table.reloadData('pay_config');
                                }
                            }
                        });
                    });
                }
            });
        });
    </script>
</body>
